<script setup lang="ts">
import { ref, onMounted } from "vue";

const width = ref(600);
const height = ref(400);

onMounted(() => {
  width.value = Math.min(window.innerWidth - 32, 1000);
});
</script>

<template>
  <div class="min-h-screen bg-gray-50 text-gray-900">
    <div class="max-w-6xl mx-auto p-6 space-y-6">
      <h1 class="text-2xl font-semibold">要图速览 - 初始化成功</h1>
      <a-button type="primary">Ant Design 按钮</a-button>

      <div class="border rounded-md bg-white p-4">
        <v-stage :config="{ width, height }">
          <v-layer>
            <v-rect
              :config="{
                x: 20,
                y: 20,
                width: 120,
                height: 80,
                fill: '#60a5fa',
                cornerRadius: 8,
              }"
            />
            <v-text
              :config="{
                x: 24,
                y: 24,
                text: 'Konva 渲染 OK',
                fontSize: 18,
                fill: '#fff',
              }"
            />
          </v-layer>
        </v-stage>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
